<template>
    <div class="user-info">
        <div class="form">
            <a-row type="flex" :gutter="[16,32]">
                <a-col flex="80px">用户名：</a-col>
                <a-col flex="auto">
                    <span v-if="editStatus===0">{{userInfo.realName}}</span>
                    <a-input v-else v-model="userInfo.realName" />
                </a-col>
            </a-row>
            <a-row type="flex" :gutter="[16,32]">
                <a-col flex="80px">邮箱：</a-col>
                <a-col flex="auto">
                    <span v-if="editStatus===0">{{userInfo.email}}</span>
                    <a-input v-else v-model="userInfo.email" :disabled="true" />
                </a-col>
            </a-row>
            <a-row type="flex" :gutter="[16,32]">
                <a-col flex="80px">机构：</a-col>
                <a-col flex="auto">
                    <span v-if="editStatus===0">{{userInfo.organName}}</span>
                    <a-input v-else v-model="userInfo.organName" :disabled="true" />
                </a-col>
            </a-row>
            <!-- <a-row type="flex" :gutter="[16,32]">
                <a-col flex="80px"></a-col>
                <a-col flex="auto">
                    <a-button type="primary" v-if="editStatus===0" @click="editStatus=1">编辑</a-button>
                    <div v-else>
                        <a-button type="primary" @click="save">保存</a-button>
                        <a-button type="primary" ghost @click="cancel">取消</a-button>
                    </div>
                </a-col>
            </a-row> -->
        </div>
    </div>
</template>

<script>
export default {
    name:'Info',
    data(){
        return {
            userInfo:{},
            editStatus:0
        }
    },
    created() {
        this.getUserInfo();
    },
    methods:{
        getUserInfo() {
            this.$http.getUserInfo().then(res=>{
                if(res.userInfo) {
                    this.userInfo = res.userInfo;
                }
            });
        },
        save() {
            let params = {
                name:this.userInfo.realName,
                email:this.userInfo.email,
            }
            this.$http.userUpdate(params);
        },
        cancel() {
            this.editStatus = 0;
            this.getUserInfo();
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_variables.scss';
.user-info {
    padding:30px;
    .form {
        width:500px;
    }

    button {
        margin-right:20px;
    }
    .ant-btn-primary {
        background-color: $primary-color;
        border-color: $primary-color;
    }
    .ant-btn-background-ghost.ant-btn-primary {
        color:$primary-color;
        border-color: $primary-color;
    }
}
</style>